<template>
  <div class="resultmain">
    <div class="card">
      <div>
        <img
        style="width:80%;"
          :src="exam_img"
          class="image"
        />
      </div>
      <el-card class="box-card" style="line-height: 20px">
        <div slot="header" class="clearfix">
          <span>学生信息</span>
          <el-button @click="startFace" style="float: right; padding: 3px 0" type="text"
            >开始比对</el-button
          >
        </div>
        <div v-for="item in info" :key="item.id" class="text item left">
          <span>{{ item.name }}:</span>
          <span>{{ item.value }}</span>
        </div>
      </el-card>

      <!-- <div class="result" style="width:50%;line-height:10px;">
        <span>比对结果:</span>
        <span>{{result}}({{sorce}}%)</span>
    </div> -->
      <!-- <el-button>开始分析</el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: "尚未开始",
      sorce: 0.0,
    };
  },
  props: {
    detailinfo: {
      type: Object,
    },
  },
  computed: {
    info() {
      if (this.detailinfo === null) {
        return [
          { name: "姓名", value: "请先拍摄身份证" },
          { name: "学号", value: "请先拍摄身份证" },
          { name: "身份证号", value: "请先拍摄身份证" },
          { name: "比对相似度", value: "请先拍摄身份证" },
        ];
      }
      return [
        { name: "姓名", value: this.detailinfo.name },
        { name: "学号", value: this.detailinfo.stuid },
        { name: "身份证号", value: this.detailinfo.sfzid },
        { name: "比对相似度", value: this.detailinfo.result },
      ];
    },
    exam_img() {
      // return "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
      if (this.detailinfo === null) {
        return "empty.png"
      }
      return "data:image/jpeg;base64,"+this.detailinfo.exam_img
    }
  },
  methods: {
    startFace(){
      this.$emit("startFace")
    }
  }
};
</script>

<style scoped>
.resultmain {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  height: 80vh;
  width: 32%;
}
.card {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}
.info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #fff;
}
.result {
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.left {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
</style>